<template>
  <div class="officialCenter">
    <el-tabs v-model="activeName" :value="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in tabList" :label=item.name :name=item.url :key=index></el-tab-pane>
    </el-tabs>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="主题">
        <el-input size="mini" v-model="formInline.title" placeholder="主题"></el-input>
      </el-form-item>
      <el-form-item label="通知类型">
        <el-select size="mini" v-model="formInline.type" placeholder="通知类型">
          <el-option label="类型一" value="类型一"></el-option>
          <el-option label="类型二" value="类型二"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          size="mini"
          v-model="formInline.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData"
      style="width: 940px;"
      max-height="250">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        sortable
        prop="date"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'officialCenter',
  components: {
  },
  data () {
    return {
      isAddBtn: false, // 操作权限
      roles: '', // 身份
      activeName: 'outbox', // 选中tab
      tabList: [ // tab标签
        {
          name: '收件箱',
          url: 'receipt'
        },
        {
          name: '发件箱',
          url: 'outbox'
        },
        {
          name: '管理配置',
          url: 'manage'
        }
      ],
      formInline: { // 查询表单
        title: '',
        type: '',
        time: ''
      },
      tableData: [{ // 表格数据
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  mounted () {
    this.Operate = JSON.parse(localStorage.getItem('Operate')); // 获取操作权限
    this.roles = JSON.parse(localStorage.getItem('Roles')); // 获取身份
    this.isAddBtn = this.Operate.teacher.message.isAddBtn // 设定操作
  },
  methods: {
    handleClick (tab) { // tab切换
      console.log(tab);
      let router = tab.$options.propsData.name;
      this.$router.push({ path: router });
    },
    deleteRow (index, rows) { // 表格删除行
      rows.splice(index, 1);
    },
    onSubmit () { // 提交查询表单
      console.log('submit!');
    }
  }
}
</script>
